<template>
    <div class="row">
      <div class="col-1 d-flex">
        <!-- 美化的智能搜索按钮 -->
        <div class="tooltip-container">
          <button
            class="btn fixed-button"
            type="button"
            data-bs-toggle="offcanvas"
            data-bs-target="#offcanvasRight"
            aria-controls="offcanvasRight"
            @mouseenter="showTooltip = true"
            @mouseleave="showTooltip = false"
          >
            智能搜索
          </button>
          <!-- 弹出框的容器 -->
          <div class="tooltip-text" v-if="showTooltip">
            我是您的智能搜索小助手，请点击尝试一下吧
          </div>
        </div>
        <IntelSearchTest />
      </div>
    </div>
  </template>
  
  <style>
  .fixed-button {
    position: fixed;
    top: 10%;
    right: 10px;
    background-image: linear-gradient(45deg, #ffcc00 0%, #ff9900 74%);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    outline: none;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    overflow: hidden;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    backdrop-filter: blur(10px);
  }
  
  .fixed-button:hover {
    background-image: linear-gradient(45deg, #e6b800 0%, #e69c00 74%);
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
    transform: translateY(-3px);
    border: 2px solid #cc8800;
  }
  
  .fixed-button:active {
    background-image: linear-gradient(45deg, #cc8800 0%, #cc7a00 74%);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transform: translateY(1px);
  }
  
  .fixed-button:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 204, 0, 0.5);
  }
  
  .tooltip-container {
    position: relative;
    display: inline-block;
  }
  
  .tooltip-text {
    visibility: hidden;
    width: 200px; /* 调整宽度以适应内容 */
    background-color: rgba(255, 255, 255, 0.9); /* 轻微透明的白色背景 */
    color: #333;
    text-align: center;
    border-radius: 8px;
    padding: 10px;
    position: absolute;
    z-index: 1000;
    bottom: 100%;
    left: 50%;
    margin-left: -250px; /* 调整以居中对齐按钮 */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    opacity: 0;
    transition: opacity 0.3s, visibility 0.3s, transform 0.3s;
    transform: scale(0.8); /* 初始缩放以产生弹出效果 */
    pointer-events: none;
  }
  
  .tooltip-container:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
    transform: scale(1); /* 悬停时恢复原始大小 */
  }
  
  .tooltip-text:after {
    content: "";
    position: absolute;
    bottom: -10px;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent rgba(255, 255, 255, 0.9) transparent;
  }
  
  /* 确保弹出框不会超出视口 */
  @media screen and (max-width: 768px) {
    .tooltip-text {
      left: auto;
      right: 10px; /* 靠近右侧边缘 */
      margin-left: 0;
    }
  }
  </style>
  
  <script setup lang="ts">
  import { ref } from 'vue';
  const showTooltip = ref(false);
  </script>
  
  <script lang="ts">
  import { defineComponent } from 'vue';
  import IntelSearchTest from './IntelSearchTest.vue';
  
  export default defineComponent({
    name: 'RightCanvas',
    components: {
      IntelSearchTest,
    },
  });
  </script>